头像与国旗的融合

到国庆，大家都急着给祖国母亲庆生。

每年每到此时，微信朋友圈就会流行起给头像装饰上国旗，而今年又流行这款：

那么，将一张国旗图片与我们的头像，快速得到想要的头像，使用 CSS 如何简单实现呢？

有人认为是改变其中一张图的透明度，实际上不是的。仔细观察合成后的头像，最左边的基本上只能看到红旗看不到原本的头像内容，而最右边基本只能看到头像而不再显示红旗的红色背景。

在 CSS 中使用 mask 遮罩，一行代码实现头像与国旗的融合

在 CSS 中，我们仅仅需要将两张图片叠加在一起，对上层的图片使用 mask 属性，一行代码即可实现该效果。

div {
    position: relative;
    margin: auto;
    width: 200px;
    height: 200px;
    // 正常头像
    background: url(image1) no-repeat;
    background-size: cover;
}
.div::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    // 国旗图片
    background: url(image2) no-repeat;
    background-size: cover;
    -webkit-mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent);
}

在上面的代码中，我们利用了 div 和它的一个伪元素 div::after，实现了将头像和国旗叠加在一起。

只需要在 div::after 中，设置一层 mask 遮罩 mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent)，我们就可以实现头像与国旗的巧妙叠